<template>
  <div class="max-w-4xl mx-auto p-4">
    <a-card>
      <a-typography-title :level="2">文本排序工具</a-typography-title>
      
      <a-form layout="vertical">
      <!-- 输入区域 -->
        <a-form-item>
          <a-textarea
            v-model:value="inputText"
          placeholder="请输入要排序的文本，每行一个项目..."
            :rows="6"
            :auto-size="{ minRows: 6, maxRows: 12 }"
            class="font-mono"
          />
        </a-form-item>

        <a-row :gutter="24">
          <!-- 排序方式 -->
          <a-col :span="12">
            <a-form-item label="排序方式">
              <a-radio-group v-model:value="sortType" button-style="solid">
                <a-radio-button value="line">按行排序</a-radio-button>
                <a-radio-button value="word">按单词排序</a-radio-button>
                <a-radio-button value="length">按长度排序</a-radio-button>
                <a-radio-button value="number">数字排序</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <!-- 排序选项 -->
          <a-col :span="12">
            <a-form-item label="排序选项">
              <a-space direction="vertical">
                <a-checkbox v-model:checked="options.descending">降序排列</a-checkbox>
                <a-checkbox v-model:checked="options.ignoreCase">忽略大小写</a-checkbox>
                <a-checkbox v-model:checked="options.removeDuplicates">去除重复项</a-checkbox>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>

        <!-- 数字排序说明 -->
        <a-alert
          v-if="sortType === 'number'"
          message="数字排序会将文本中的数字作为数值比较"
          type="info"
          show-icon
          class="mb-4"
        />

      <!-- 操作按钮 -->
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="sortText" :disabled="!inputText">
          排序文本
            </a-button>
            <a-button @click="clearText" :disabled="!inputText">
              清空
            </a-button>
          </a-space>
        </a-form-item>

      <!-- 结果区域 -->
        <template v-if="outputText">
          <a-divider>处理结果</a-divider>
          <a-space direction="vertical" class="w-full">
        <div class="flex justify-between items-center">
              <span class="text-gray-500">共 {{ lineCount }} 行</span>
              <a-tooltip :title="copied ? '已复制！' : '复制到剪贴板'">
                <a-button
                  type="text"
            @click="copyToClipboard"
                  :icon="copied ? h(CheckOutlined) : h(CopyOutlined)"
                >
                  {{ copied ? '已复制' : '复制' }}
                </a-button>
              </a-tooltip>
        </div>
            <a-card class="w-full bg-gray-50">
              <pre class="font-mono whitespace-pre-wrap break-all">{{ outputText }}</pre>
            </a-card>
          </a-space>
        </template>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, h } from 'vue';
import { CopyOutlined, CheckOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

const inputText = ref('');
const outputText = ref('');
const copied = ref(false);
const sortType = ref<'line' | 'word' | 'length' | 'number'>('line');
const options = ref({
  descending: false,
  ignoreCase: true,
  removeDuplicates: false
});

const lineCount = computed(() => {
  if (!outputText.value) return 0;
  return outputText.value.split('\n').filter(line => line.length > 0).length;
});

const sortText = () => {
  if (!inputText.value) {
    message.warning('请输入要排序的文本');
    return;
  }

  try {
  let lines = inputText.value.split('\n').filter(line => line.length > 0);
    
    // 排序前的预处理
    let sortedLines = [...lines];
    
    // 应用排序逻辑
    sortedLines.sort((a, b) => {
    let valueA = a;
    let valueB = b;

      if (options.value.ignoreCase) {
      valueA = valueA.toLowerCase();
      valueB = valueB.toLowerCase();
    }

      if (sortType.value === 'number') {
        const numA = parseFloat(valueA) || 0;
        const numB = parseFloat(valueB) || 0;
        return numA - numB;
      } else if (sortType.value === 'length') {
        return valueA.length - valueB.length;
      } else if (sortType.value === 'word') {
        return valueA.trim().localeCompare(valueB.trim());
      } else {
    return valueA.localeCompare(valueB);
      }
  });

    // 是否降序
    if (options.value.descending) {
      sortedLines.reverse();
  }

    // 是否去重
    if (options.value.removeDuplicates) {
      sortedLines = Array.from(new Set(sortedLines));
    }

    outputText.value = sortedLines.join('\n');
    message.success('排序成功！');
  } catch (err) {
    message.error('排序失败，请检查输入');
    console.error('排序失败:', err);
  }
};

const clearText = () => {
  inputText.value = '';
  outputText.value = '';
  message.success('已清空');
};

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(outputText.value);
    copied.value = true;
    message.success('复制成功！');
    setTimeout(() => {
      copied.value = false;
    }, 2000);
  } catch (err) {
    message.error('复制失败，请重试');
    console.error('复制失败:', err);
  }
};
</script> 

<style scoped>
.ant-card {
  background-color: white;
}

:deep(.ant-card-body) {
  padding: 24px;
}

:deep(.ant-radio-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 640px) {
  :deep(.ant-radio-button-wrapper) {
    padding: 0 12px;
  }
}
</style> 